<template>
	<view class="main">
		<view class="">入库申请单列表</view>
		<view class="title">
			<view class="apply_id">
				<input type="text" placeholder="输入申请单号" />
				<text>申请单号输入</text>
			</view>
			<view class="apply_btn">搜索</view>
		
		</view>
		<view class="good_detail" >
			<view class="td_area">
				<view class="td td_1">供应商名称</view>
				<view class="td td_2">申请单号</view>
				<view class="td td_3">申请日期</view>
				<view class="td td_4">预计到货时间</view>
				<view class="td td_5">总品项数</view>
				<view class="td td_6">联系电话</view>
			</view>
			<view class="tr_area" v-for="(item,index) in applyList" :key="item.id|| index" @click="select(index)" :class="{'select':index===selectedId}" >
				<view class="tr tr_1">{{item.supplier}}</view>
				<view class="tr tr_2">{{item.applyForId}}</view>
				<view class="tr tr_3">{{formatTime(item.create_time)}}  </view>
				<view class="tr tr_4">{{item.applyDate}}</view>
				<view class="tr tr_5">总品项数</view>
				<view class="tr tr_6">{{item.contactPhone}}</view>
			</view>
			<view class="sure_btn" @click="sure">选择</view>
		</view>
		<storeInSure :applyItem='applyItem' :goodDetail='goodDetail' :visible="storeInSureShow" v-if="storeInSureShow" @close='storeInSureShow=false'></storeInSure>
	</view>
</template>
<script>
const couldDB=uniCloud.importObject('getDb')
import { formatTime } from '../untils/formatTime';
import storeInSure from './storeInSure.vue';
export default {
	name: 'applyDetail',
	components:{
		storeInSure
	},
	data(){
		
		return{
			applyList:[],
			applyId:'',
			selectedId:-1,
			applyItem:{},
			goodDetail:[],
			storeInSureShow:false
		   
		}
	},
	mounted() {
		this.getApply()
	},
	methods:{
		formatTime,
	async	getApply(){
		try{
			const item=await couldDB.getDB('ApplyForStorage',{})

			if(item.code){
				this.applyList=item.data
			}
		}catch(e){
			console.error(e);
		}
		
		},
	
		select(index){
			this.selectedId=index
		},
	async sure(){
			if(this.selectedId===-1){
				uni.showToast({
					title:'未选择订单'
				})
				return
			}
			console.log('1111',JSON.stringify(this.applyList[this.selectedId]._id)  );
			try{
				const item=await couldDB.getDB('ApplyForGoodDetail',{applyForId:this.applyList[this.selectedId].applyForId})
		    console.log(JSON.stringify(item));
			if(item.code){
			
				this.goodDetail=item.data
				this.storeInSureShow=true
			}	
			}catch(e){
				console.log(e);
			}
				
		}
			
	}

};
</script>
<style lang="scss" scoped>
.main {
	display: flex;
	flex-direction: column;
	border-radius: 8rpx;
	padding: 20rpx 20rpx;
	

	
}
.select{
	background-color: #55aa7f;
	color: white;
}
.closebtn{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 20rpx;
	top: 20rpx;
	width: 50rpx;
	height: 50rpx;
	background: white;
	
}
.title {
	display: flex;
	padding: 20rpx 40rpx;
	input {
		background-color: white;
		padding: 5rpx 5rpx;
	}
	.apply_id {
		display: flex;
		margin: 0 50rpx;
		padding: 10rpx 20rpx;
	}
	.apply_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #55aaff;
		color: white;
		padding: 0 20rpx;
		border-radius: 8rpx;
	}
}
.good_detail {
}
.td_area {
	display: flex;
}
.tr_area {
	display: flex;
}
.td {
	background-color: #ccc;
	padding: 10rpx 20rpx;
}
.td_1 {
	width: 20%;
}
.td_2 {
	width: 20%;
}
.td_3 {
	width: 20%;
}
.td_4 {
	width: 10%;
}
.td_5 {
	width: 10%;
}
.td_6{
	width: 20%;
}

.tr {
	padding: 10rpx 20rpx;
	margin-top: 10rpx;
}

.tr_1 {
	width: 20%;
}
.tr_2 {
	width: 20%;
}
.tr_3 {
	width: 20%;
}
.tr_4 {
	width: 10%;
}
.tr_5 {
	width: 10%;
}
.tr_6{
	width: 20%;
}
.sure_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #4D9DE0; /* 优化主色调，提升可读性 */
  color: white;
  margin: 50rpx auto;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 2rpx 8rpx rgba(77, 157, 224, 0.3); /* 添加轻微阴影 */
  transition: all 0.2s ease; /* 添加过渡动画 */
  
  /* 触摸反馈 */
  &:active {
    background-color: #3A86BC; /* 按下时的颜色更深 */
    transform: scale(0.98); /* 轻微缩小效果 */
    box-shadow: 0 1rpx 4rpx rgba(77, 157, 224, 0.2);
  }
  
  /* 悬停效果（桌面端） */
  &:hover:not(:active) {
    background-color: #5AA2E6;
    box-shadow: 0 4rpx 12rpx rgba(77, 157, 224, 0.4);
  }
}
</style>
